<template>
  <el-card class="content">
    <div id="topBox" class="chartHeader">
      <h2>卫星状况</h2>
      <p>
        当前时间: <span>{{ dqsj }}</span> &nbsp;&nbsp;&nbsp;&nbsp; GPS:<span>
          {{ sdata }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp; GNSS:<span>{{ sdatabd }}</span> &nbsp;&nbsp;
        &nbsp;&nbsp;GLONASS:<span> {{ sdataglon }}</span>
      </p>
    </div>
    <div id="starChart" class="chartContent"></div>
    <div id="SNRchart" class="chartContent"></div>
  </el-card>
</template>

<script>
import axios from "axios";
import moment from "moment";
import TextTree from "~/components/TextTree";
import Highcharts from "highcharts";
import HighchartMore from "highcharts/highcharts-more";
import exportingInit from "highcharts/modules/exporting";
import BDS_PIC from "../../../../assets/BDS.png";
import GPS_PIC from "../../../../assets/GPS.png";
import GLONASS_PIC from "../../../../assets/GLONASS.png";
import * as constants from "../../../../assets/realTime.config";
exportingInit(Highcharts);
HighchartMore(Highcharts);
let kkchartobj;
let kkchartobj2;
export default {
  name: "SatelliteStatus",
  components: {
    //  TextTree
  },
  props: {
    node: Object,
  },
  data() {
    return {
      sdata: "",
      sdatabd: "",
      sdataglon: "",
      dqsj: null,
      time: null,
    };
  },
  created() {
    console.log(this.node);
    this.times();
  },
  mounted() {
    axios({
      method: "get",
      url: "/realData/getRealData/" + `${this.node.monitorCode}`,
    }).then((res) => {
      this.getChart(res);
    });
  },
  methods: {
    getChart(res) {
      let skyList = res.data.parameter;
      let kkSkyObj = {
        gpsPosition: [],
        bdsPosition: [],
        glonPosition: [],
        gpsSignal: [],
        bdsSignal: [],
        glonSignal: [],
        gpsObj: {},
        bdsObj: {},
        glonObj: {},
      };
      for (let i = 0; i < skyList.length; i++) {
        if (skyList[i].skyType == "02") {
          // let gpsObj = {};
          kkSkyObj.gpsObj = {
            angel: Math.round(skyList[i].azimuth),
            number: "G" + skyList[i].monitorCode,
            cno: Math.round(skyList[i].cno),
            elevation: Math.round(skyList[i].elevation),
          };
          kkSkyObj.gpsPosition.push(kkSkyObj.gpsObj);
          kkSkyObj.gpsSignal.push(kkSkyObj.gpsObj);
        } else if (skyList[i].skyType == "00") {
          // let bdsObj = {};
          kkSkyObj.bdsObj = {
            elevation: Math.round(skyList[i].elevation),
            angel: Math.round(skyList[i].azimuth),
            number: "B" + (skyList[i].monitorCode - 100),
            cno: Math.round(skyList[i].cno),
          };
          kkSkyObj.bdsPosition.push(kkSkyObj.bdsObj);
          kkSkyObj.bdsSignal.push(kkSkyObj.bdsObj);
        } else if (skyList[i].skyType == "01") {
          // let glonObj = {};
          kkSkyObj.glonObj = {
            elevation: Math.round(skyList[i].elevation),
            angel: Math.round(skyList[i].azimuth),
            number: "R" + (skyList[i].monitorCode - 64),
            cno: Math.round(skyList[i].cno),
          };
          kkSkyObj.glonPosition.push(kkSkyObj.glonObj);
          kkSkyObj.glonSignal.push(kkSkyObj.glonObj);
        }
      }
      //星空图
      let StarChartOpt = Highcharts.chart("starChart", {
        chart: {
          backgroundColor: "rgba(0,0,0,0)",
          polar: true,
        },
        style: {
          color: "#333",
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        title: {
          text: "星空图",
        },
        pane: {
          startAngle: 0,
          endAngle: 360,
        },
        legend: {
          itemDistance: 10,
          symbolPadding: 10,
        },
        xAxis: {
          tickInterval: 30,
          min: 0,
          max: 360,
          labels: {
            style: {
              color: "#333",
            },
          },
        },
        yAxis: {
          min: 0,
          max: 90,
          tickInterval: 30,
          reversed: true,
          showFirstLabel: false,
          showLastLabel: true,
          labels: {
            style: {
              color: "#333",
            },
          },
        },
        exporting: {
          enabled: false,
        },
        tooltip: {
          valueSuffix: "°",
          formatter: function () {
            return (
              "<b>" +
              this.series.name +
              "</b><br/>卫星编号" +
              this.point.number +
              "<br/>卫星高度角" +
              Highcharts.numberFormat(this.point.elevation, 2) +
              "°<br/>卫星方位角" +
              Highcharts.numberFormat(this.x, 2) +
              "°<br/>"
            );
          },
        },
        plotOptions: {
          series: {
            pointStart: 0,
            pointInterval: 1,
          },
          column: {
            pointPadding: 0,
            groupPadding: 0,
          },
        },
        series: [
          {
            type: "scatter",
            name: '<b style="color: #333;">GPS</b>',
            marker: {
              symbol: "url(" + GPS_PIC + ")",
              height: 12,
              width: 12,
            },
          },
          {
            type: "scatter",
            name: '<b style="color: #333;">GNSS</b>',
            marker: {
              symbol: "url(" + BDS_PIC + ")",
              height: 12,
              width: 12,
            },
          },
          {
            type: "scatter",
            name: '<b style="color: #333;">GLONASS</b>',
            marker: {
              symbol: "url(" + GLONASS_PIC + ")",
              height: 12,
              width: 12,
            },
          },
        ],
      });
      this.chart = StarChartOpt;
      kkchartobj = StarChartOpt;
      const updatePolrChart = function (data1, data2, data3) {
        let polarChart = kkchartobj;
        let gps = [];
        for (let i = 0; i < data1.length; i++) {
          gps.push({
            x: data1[i].angel,
            y: data1[i].elevation,
            number: data1[i].number,
            elevation: data1[i].elevation,
          });
        }
        polarChart.series[0].setData(gps);

        let bds = [];
        for (let j = 0; j < data2.length; j++) {
          bds.push({
            x: data2[j].angel,
            y: data2[j].elevation,
            number: data2[j].number,
            elevation: data2[j].elevation,
          });
        }
        polarChart.series[1].setData(bds);

        let gls = [];
        for (let k = 0; k < data3.length; k++) {
          gls.push({
            x: data3[k].angel,
            y: data3[k].elevation,
            number: data3[k].number,
            elevation: data3[k].elevation,
          });
        }
        polarChart.series[2].setData(gls);
      };
      updatePolrChart(
        kkSkyObj.gpsPosition,
        kkSkyObj.bdsPosition,
        kkSkyObj.glonPosition
      );
      //信噪比
      let newChart = Highcharts.chart("SNRchart", {
        chart: {
          backgroundColor: "rgba(0,0,0,0)",
          type: "column",
        },
        title: {
          text: "信噪比",
        },
        xAxis: {
          type: "category",
          title: {
            text: null,
          },
          labels: {
            style: {
              color: "#333",
            },
            formatter: function () {
              return this.value;
            },
          },
        },
        legend: {
          itemDistance: 10,
          symbolPadding: 10,
        },
        yAxis: {
          min: 0,
          title: {
            text: "SNR (dB)",
            align: "high",
            style: {
              color: "#333",
            },
          },
          labels: {
            style: {
              color: "#333",
            },
            overflow: "justify",
          },
        },
        // color: ['#00bf86', '#9c02f8', '#ffb406'],
        exporting: {
          enabled: false,
        },
        tooltip: {
          valueSuffix: "dB",
          formatter: function () {
            return (
              "<b>" +
              this.series.name +
              "</b><br/>卫星编号" +
              this.point.name +
              "<br/>" +
              Highcharts.numberFormat(this.y, 2) +
              "dB"
            );
          },
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0,
            pointWidth: 10,
          },
        },
        credits: {
          enabled: true,
          text: "",
        },
        series: [
          {
            name: '<b style="color: #333;">GPS</b>',
            color: "#0A80A4",
          },
          {
            name: '<b style="color: #333;">BDS</b>',
            color: "#FF8EAC",
          },
          {
            name: '<b style="color: #333;">GLONASS</b>',
            color: "#75CDA2",
          },
        ],
      });
      this.chart2 = newChart;
      kkchartobj2 = newChart;
      const updateHistogramChart = function (data1, data2, data3) {
        let chartsa = kkchartobj2,
          gps = [],
          bds = [],
          gls = [];

        for (let i = 0; i < data1.length; i++) {
          gps.push({
            name: data1[i].number,
            y: data1[i].cno,
          });
        }
        chartsa.series[0].setData(gps);

        for (let j = 0; j < data2.length; j++) {
          bds.push({
            name: data2[j].number,
            y: data2[j].cno,
          });
        }
        chartsa.series[1].setData(bds);

        for (let k = 0; k < data3.length; k++) {
          gls.push({
            name: data3[k].number,
            y: data3[k].cno,
          });
        }
        chartsa.series[2].setData(gls);
      };
      updateHistogramChart(
        kkSkyObj.gpsPosition,
        kkSkyObj.bdsPosition,
        kkSkyObj.glonPosition
      );
      this.sdata = kkSkyObj.gpsPosition.length;
      console.log(this.sdata);
      (this.sdatabd = kkSkyObj.bdsPosition.length),
        (this.sdataglon = kkSkyObj.glonPosition.length);
    },
    nodeClicked(d, node, tree) {},
    times() {
      this.time = setInterval(() => {
        this.dqsj = moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
};
</script>

<style scoped>
.content {
  *display: flex;
  /*align-items:center;*/
  /*justify-content:center;*/
  height: 83vh;
  margin-right: 5px;
  overflow: auto;
}
.chartHeader {
  height: 10vh;
  width: 100%;
  /* background: red; */
  text-align: center;
}

.chartContent {
  width: 40%;
  height: 60vh;
  /* background: red; */
  float: left;
  margin-left: 5%;
}
span {
  color: skyblue;
}

/* .chartContent:nth-last-of-type(2) {
  position: absolute;
  right: 0;
} */
</style>